<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common2::common(title='任务')">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
</head>
<style type="text/css">
body {
	margin: 0;
	background-color: #EBEEF5;
}
.firstHeader, .el-footer {
	background-color: #545c64;
	color: white;
	text-align: center;
	line-height: 60px;
	
}
.el-header,.el-main{
	padding:0;
}
.box-card {
   margin:10px;
 }
.box-card .el-card__header {
   top: 100px;
   position:  fixed;
   z-index:  1000;
   background-color:  white;
   width: 96%;
   padding:5px 10px
 }
.box-card .el-card__body {
   margin-top:110px;
 }
.el-aside{
	padding:20px;
}
.el-table__row:hover   {cursor:pointer;}
.head_span{
	padding-left:10px;
}
.caseDialog{
	margin-right:0;
	width:420px;
	min-height:500px;
}
.el-icon-setting:hover   {
	cursor:pointer;
}
.cursorLine:hover   {
	cursor:pointer;
	text-decoration:underline;
}
.cursor:hover   {cursor:pointer;}
li {list-style-type:none;}
.lidiv{
	cursor:pointer;
	padding:5px;
}
.lidiv:hover {cursor:pointer;text-decoration:underline;}
#app{
	height:100%;
	overflow-y:hidden;
}
body{
	height:100%;
	overflow-y:hidden;
}
.page-component__scroll{
	height:100%;
}
.page-component__scroll .el-scrollbar__wrap{
	overflow:auto;
}
.selectedModule {background-color: #E8E8E8;border-radius:3px;}
.bullet{
	background: url("../../images/bullet.svg") no-repeat;
	background-position:left center;
}
</style>
<script type="text/javascript" th:src="@{/js/frontend/testcase/taskCase.js?v=2}"></script>
<body>
	<div id="app">
		<input type="hidden" id="taskId" th:value="${taskId}">
		<input type="hidden" id="taskName" th:value="${taskName}">
		<el-container> 
			<el-header class="firstHeader" style="position:  fixed;width:  100%;z-index:  1000;margin-bottom: 100px;"> 
				<el-menu
					:default-active="1" class="el-menu-demo" mode="horizontal"
					background-color="#545c64" text-color="#fff"
					active-text-color="#ffd04b">
					<el-submenu index="1">
						<template slot="title"><span sec:authentication="principal.nickName"></span></template>
						<el-menu-item index="1-1" @click="goFrontend">首页</el-menu-item>
						<el-menu-item index="1-2" @click="goBackend">管理后台</el-menu-item>
					</el-submenu>
				</el-menu> 
			</el-header>
			<el-container> 
				<el-header class="secondHeader" style="height: 40px;position:  fixed;width:  100%;z-index:  1000;top: 60px;left:261px;"> 
					<div style="width:100%;background:white;padding:10px">
					  <el-tooltip effect="dark" placement="top-start">
					  	  <div slot="content">OK : {{allCount.okCount}}/{{allCount.okRate}}</div>
						  <span class="head_span" >&nbsp;&nbsp;<i style="color:#67C23A">{{allCount.okCount}}</i></span>
					  </el-tooltip>
					  <el-tooltip effect="dark" placement="top-start">
					  	 <div slot="content">BLOCK : {{allCount.blockCount}}/{{allCount.blockRate}}</div>
					  	<span class="head_span" >/&nbsp;&nbsp;<i style="color:#E6A23C">{{allCount.blockCount}}</i></span>
					  </el-tooltip>
					  <el-tooltip effect="dark" placement="top-start">
					  	 <div slot="content">NG : {{allCount.ngCount}}/{{allCount.ngRate}}</div>
						  <span class="head_span">/&nbsp;&nbsp;<i style="color:red">{{allCount.ngCount}}</i></span>
					  </el-tooltip>
					  <el-tooltip effect="dark" placement="top-start">
					  	 <div slot="content">NG->OK : {{allCount.ngToOkCount}}/{{allCount.ngToOkRate}}</div>
						  <span class="head_span">/&nbsp;&nbsp;<i style="color:#67C23A">{{allCount.ngToOkCount}}</i></span>
					  </el-tooltip>
					  <el-tooltip effect="dark" placement="top-start">
					  	 <div slot="content">TODO : {{allCount.todoCount}}/{{allCount.todoRate}}</div>
						  <span class="head_span">/&nbsp;&nbsp;<i style="color:gray">{{allCount.todoCount}}</i>&nbsp;&nbsp;</span>
					  </el-tooltip>
					  
					</div>
				</el-header>
				<el-container> 
				<el-aside width="250px" style="padding:20px;margin-top:50px;">
					<el-row style="height:30px;margin-bottom:10px;">
										
						<el-col :span="20">{{taskName}}</el-col>					
						<el-col :span="4" class="cursor">
							<el-popover
							  placement="bottom"
							  width="160"
							  >
							  <p class="cursorLine" @click="opendTaskDialog">编辑信息</p>
							  <p class="cursorLine" style="color:red;margin-top:10px" @click="doDeleteTask">删除任务</p>
							  <i class="el-icon-setting" slot="reference"></i>
							</el-popover>
						</el-col>					
					</el-row>
					<hr>
					<el-row style="height:15px;margin:10px 0 10px 0">
						<el-col :span="20" style="color:#909399;">任务分组</el-col>					
						<el-col :span="4" class="cursor"><i class="el-icon-circle-plus" @click="doAddGroup"></i></el-col>					
					</el-row>
					<div >
						<ul style="margin:0;padding:10px;font-size:15px;">
							<li>
								<div class="lidiv" :class="{'selectedModule':selectedModuleIndex ==-1 }" @click="clickModule(null,-1)">
									<i class="el-icon-tickets"></i>&nbsp;&nbsp;所有任务
								</div>
							</li>
							<li v-for="(module,index) in taskGroupData" :class="{'selectedModule':index ==selectedModuleIndex }" @click="clickModule(module,index)" v-on:mouseenter='hoverModuleIndex=index' v-on:mouseleave="hoverModuleIndex=-1">
								<div class="lidiv">
									<span class="bullet">&nbsp;&nbsp;&nbsp;</span>
									<span>&nbsp;&nbsp;{{module.name}}</span>
									<el-popover
									  placement="bottom"
									  width="160"
									  style="float:right"
									  >
									  <!-- <p class="cursorLine" @click="mergeGroup(module)">移动</p> -->
									  <p class="cursorLine" @click="doUpdateModule(module)">重命名</p>
									  <p class="cursorLine" style="color:red;margin-top:10px" @click="doDeleteModule(module)">删除</p>
									  <i class="el-icon-more" slot="reference" v-show="index == hoverModuleIndex"></i>
									</el-popover>
								</div>
							</li>
							<li :class="{'selectedModule':selectedModuleIndex ==-2 }" @click="clickModule(emptyModule,-2)"  v-on:mouseenter='hoverModuleIndex=-2'>
								<div class="lidiv">
									<span>无所属分组</span>
								</div>
							</li>
						</ul>
					</div>
				</el-aside>
				<el-main style="height:100vh">
				<el-scrollbar ref="scrollbar" :native="false">
					<el-card class="box-card">
						<div slot="header" style="height:20px;">
								<div style="float:left">
							    	<el-button size="small" @click="openCloseDialog('statusForm',true)" :disabled="selectedCase.length==0">更改执行结果</el-button>
							    	<el-button size="small" @click="doDeleteCase" :disabled="selectedCase.length==0">移&nbsp;&nbsp;除</el-button>
							    	<el-button size="small" @click="moveToGroupId=null;openCloseDialog('taskMoveGroupForm',true)" :disabled="originalGroupId ==null">迁移分组</el-button>
						    	</div>
								<div style="float:right;padding-right:250px;">
									<el-select @change="queryCase" style="width:150px;" v-model="queryCaseData.status"  size="small" clearable filterable placeholder="请选择执行结果">
									    <el-option
									      v-for="item in caseStatus"
									      :key="item.code"
									      :label="item.name"
									      :value="item.code"
									      >
									    </el-option>
									</el-select>
									<el-select @change="queryCase" style="width:150px;" v-model="queryCaseData.level"  size="small" clearable placeholder="请选择优先级">
									    <el-option
									      v-for="item in levelData"
									      :key="item.itemName"
									      :label="item.itemName"
									      :value="item.itemName"
									      >
									    </el-option>
									 </el-select>
									 <el-input v-model="queryCaseData.title" size="small" style="width:200px;" placeholder="请输入标题" @keyup.enter.native="queryCase" clearable>
										<el-button slot="append" icon="el-icon-search" @click="queryCase"></el-button>
									</el-input>
						    	</div>
						</div>
					  	<div style="margin:10px;">
				    	  <el-table
				    	  	ref="caseLibraryDatagrid" 
				    	    :data="caseDatagrid"
						    tooltip-effect="dark"
						    style="width: 100%;"
						    :cell-style="tableCellStyle"
		    		
						    @row-dblclick="datagridDbclick"
						    @selection-change="handleSelectionChange"
				
						    border
						    highlight-current-row >
				    	  	   <el-table-column type="selection" min-width="30" fixed></el-table-column>
				    	  	   <el-table-column type="index" min-width="30" fixed>序号</el-table-column>
				    	  	   <el-table-column prop="moduleName" label="所属模块" width="100" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="type" label="用例类型" width="100" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="level" label="优先级" width="80" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="title" label="用例标题" > </el-table-column>
							   <el-table-column prop="prerequisite" label="前提条件" > </el-table-column>
							   <el-table-column prop="caseSteps" label="用例步骤" > </el-table-column>
							   <el-table-column prop="expectedResult" label="预期结果" > </el-table-column>
							   <el-table-column prop="remark" label="备注" > </el-table-column>
							   <el-table-column prop="createByName" label="创建人" show-overflow-tooltip> </el-table-column>
							   <el-table-column prop="status" label="执行结果" width="110">
							   		<template slot-scope="scope">
							   			<el-button  v-show="!scope.row.editStatus" size="medium" :type="statusType(scope.row)" @click="changeColumnStatus(scope.row,true,false,scope.$index)">{{ formatterStatus(scope.row) }}</el-button>
							   			<el-select :ref="'tableSelect'+scope.$index" v-show="scope.row.editStatus" v-model="scope.row.status" @change="changeColumnStatus(scope.row,false,true,scope.$index)"
							   			 @visible-change="visibleChange($event,scope.row,scope.$index)"
							   			 automatic-dropdown filterable placeholder="请选择">
										    <el-option
										      v-for="item in caseStatus"
										      :key="item.code"
										      :label="item.name"
										      :value="item.code">
										    </el-option>
										</el-select>
							   		</template>
							   </el-table-column>
						  </el-table>
						</div>
						<div style="margin:10px">
						    <el-pagination
						      :current-page="queryCaseData.page"
						      :page-sizes="[50, 80, 100]"
						      :page-size="queryCaseData.rows"
						      layout="total, sizes, prev, pager, next, jumper"
						      :total="totalNum"
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      @prev-click="handlePrevClick"
						      @next-click="handleNextClick"
						      ref="pagination">
						    </el-pagination>
						 </div>
					</el-card>
					</el-scrollbar>
				</el-main>
				</el-container>
			</el-container>
		</el-container>
		<el-dialog :visible.sync="dialogConfig.taskMoveGroupVisible" center="true">
			<el-form :model="taskData" ref="taskMoveGroupForm" :rules="rules">
				<el-form-item label="任务" prop="moveToTaskId" 
		      		:label-width="dialogConfig.formLabelWidth">	      	
			      	<el-select v-model="moveToTaskId" @change="queryTaskGroup" filterable placeholder="请选择">
					    <el-option
					      v-for="item in projectTaskData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
			    </el-form-item>
			    <el-form-item label="分组" prop="moveToGroupId" 
		      		:label-width="dialogConfig.formLabelWidth">	      	
			      	<el-select v-model="moveToGroupId" filterable placeholder="请选择">
					    <el-option
					      v-for="item in allTaskGroupData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					  </el-select>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('taskMoveGroupForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="moveToGroup">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.taskDialogVisible" center="true">
			<el-form :model="taskData" ref="taskUpdateForm" :rules="rules">
				<el-form-item label="任务名" prop="name" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="taskData.name"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('taskUpdateForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="doUpdateTask">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.taskGroupVisible" center="true">
			<el-form :model="taskData" ref="taskGroupForm" :rules="rules">
				<el-form-item label="分组名称" prop="name" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addGroup.name"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
			    <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('taskGroupForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="doUpdateGroup">确 定</el-button>
			    </div>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.statusDialogVisible" center="true" width="400px" title="选择执行结果">
			<el-form  ref="statusForm" :rules="rules">
				<el-form-item label="执行结果" prop="caseId" 
		      		:label-width="dialogConfig.formLabelWidth">
		      		  <el-select v-model="selectedStatus" filterable placeholder="请选择">
					    <el-option
					      v-for="item in caseStatus"
					      :key="item.code"
					      :label="item.name"
					      :value="item.code">
					    </el-option>
					  </el-select>
	      		</el-form-item>
				<el-form-item label="备注" prop="caseId" 
		      		:label-width="dialogConfig.formLabelWidth">
		      		  <el-input v-model="remark" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
	      		</el-form-item>
	      		<div style="padding-left:150px;">
		    		<el-button @click="openCloseDialog('statusForm',false)">取 消</el-button>
		   			<el-button type="primary" @click="updateStatusBatch">确 定</el-button>
		   		</div>
		    </el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogConfig.caseAddDialogVisible" append-to-body="true"  top="9vh"  center="true" custom-class="caseDialog" :modal="false" :close-on-press-escape="true">
			<el-form :model="addCase" ref="caseAddForm" :rules="rules">
				<el-form-item label="用例状态" prop="caseId" 
		      		:label-width="dialogConfig.formLabelWidth">
		      		  <el-select v-model="addCase.status" clearable>
					    <el-option
					      v-for="item in caseStatus"
					      :key="item.code"
					      :label="item.name"
					      :value="item.code"
					      >
					    </el-option>
					  </el-select>
	      		</el-form-item>
	      		<el-form-item label="备注" prop="caseId" 
		      		:label-width="dialogConfig.formLabelWidth">
		      		  <el-input v-model="addCase.remark" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
	      		</el-form-item>
				<el-form-item label="所属用例库" prop="libraryName" :label-width="dialogConfig.formLabelWidth">
			        <el-select v-model="addCase.libraryCode" placeholder="请选择用例库" @change="libraryChange">
					    <el-option
					      v-for="item in porjectDatagird"
					      :key="item.id"
					      :label="item.name"
					      :value="item.id">
					    </el-option>
					 </el-select>
			    </el-form-item>
		      	<el-form-item label="所属模块名" prop="moduleCode" 
		      		:label-width="dialogConfig.formLabelWidth">
			      	<el-select v-model="addCase.moduleName" placeholder="请选择用例库" @change="moduleChange">
					    <el-option
					      v-for="item in moduleSelectData"
					      :key="item.id"
					      :label="item.name"
					      :value="item.name">
					    </el-option>
					 </el-select>
			    </el-form-item>
			    <el-form-item label="用例类型" prop="type" 
		      		:label-width="dialogConfig.formLabelWidth">
			      	<el-select v-model="addCase.type" clearable placeholder="请选择用例库">
					    <el-option
					      v-for="item in typeData"
					      :key="item.itemName"
					      :label="item.itemName"
					      :value="item.itemName">
					    </el-option>
					 </el-select>
			    </el-form-item>
		      	<el-form-item label="优先级" prop="level" 
		      		:label-width="dialogConfig.formLabelWidth">
			      	<el-select v-model="addCase.level" clearable placeholder="请选择用例库">
					    <el-option
					      v-for="item in levelData"
					      :key="item.itemName"
					      :label="item.itemName"
					      :value="item.itemName">
					    </el-option>
					 </el-select>
			    </el-form-item>
			    <el-form-item label="标题" prop="title" 
			      		:label-width="dialogConfig.formLabelWidth">
				      <el-input v-model="addCase.title"  auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="前提条件" prop="prerequisite" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addCase.prerequisite" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="用例步骤" prop="caseSteps" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addCase.caseSteps" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		      	<el-form-item label="预期结果" prop="expectedResult" 
		      		:label-width="dialogConfig.formLabelWidth">
			      <el-input v-model="addCase.expectedResult" type="textarea" :autosize="{ minRows: 5}" auto-complete="off" style="width:220px;"></el-input>
			    </el-form-item>
		        <div style="padding-left:150px;">
			    	<el-button @click="openCloseDialog('caseAddForm',false)">取 消</el-button>
			   		<el-button type="primary" @click="submitForm('caseAddForm')">确 定</el-button>
			    </div>
		    </el-form>
		</el-dialog>
	</div>
</body>
</html>